/**
 * 延迟加载图片组件生成工具
 * 
 * 此工具生成微信小程序延迟加载图片组件
 */

const fs = require('fs');
const path = require('path');

// 延迟加载图片组件模板
const COMPONENT_TEMPLATE = {
  // 组件WXML模板
  wxml: `<view class="lazy-image-container {{customClass}}" style="width: {{width}}; height: {{height}}; {{customStyle}}">
  <!-- 加载中占位图 -->
  <block wx:if="{{!loaded && !error}}">
    <image 
      class="lazy-image-placeholder {{fadeIn ? 'fade-in' : ''}}"
      src="{{placeholderSrc}}"
      mode="{{mode}}"
      style="width: 100%; height: 100%;"
    ></image>
    <view wx:if="{{showLoading}}" class="lazy-image-loading">
      <view class="loading-icon"></view>
    </view>
  </block>
  
  <!-- 加载失败占位图 -->
  <block wx:if="{{error}}">
    <image 
      class="lazy-image-error"
      src="{{errorSrc}}"
      mode="{{mode}}"
      style="width: 100%; height: 100%;"
    ></image>
    <view wx:if="{{showRetry}}" class="retry-btn" bindtap="retryLoad">重试</view>
  </block>
  
  <!-- 实际图片 (隐藏但预加载) -->
  <image
    id="actualImage"
    class="lazy-image {{loaded ? 'lazy-image-loaded' : 'lazy-image-loading'}} {{fadeIn && loaded ? 'fade-in' : ''}}"
    src="{{src}}"
    mode="{{mode}}"
    lazy-load="{{useLazyLoad}}"
    webp="{{useWebp}}"
    show-menu-by-longpress="{{showMenuByLongpress}}"
    style="width: 100%; height: 100%;"
    bindload="onImageLoad"
    binderror="onImageError"
  ></image>
</view>`,

  // 组件WXSS模板
  wxss: `.lazy-image-container {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.lazy-image {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image-loaded {
  opacity: 1;
}

.lazy-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.lazy-image-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.lazy-image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.4);
}

.loading-icon {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.retry-btn {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 8rpx 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 8rpx;
  font-size: 24rpx;
  z-index: 3;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}`,

  // 组件JS模板
  js: `Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 实际图片路径
    src: {
      type: String,
      value: ''
    },
    // 占位图路径
    placeholderSrc: {
      type: String,
      value: '/images/placeholders/default_placeholder.svg'
    },
    // 错误占位图路径
    errorSrc: {
      type: String,
      value: '/images/placeholders/error_placeholder.svg'
    },
    // 图片裁剪模式
    mode: {
      type: String,
      value: 'aspectFill'
    },
    // 宽度
    width: {
      type: String,
      value: '100%'
    },
    // 高度
    height: {
      type: String,
      value: '300rpx'
    },
    // 自定义类名
    customClass: {
      type: String,
      value: ''
    },
    // 自定义样式
    customStyle: {
      type: String,
      value: ''
    },
    // 是否使用微信小程序原生懒加载
    useLazyLoad: {
      type: Boolean,
      value: true
    },
    // 是否使用WebP格式
    useWebp: {
      type: Boolean,
      value: true
    },
    // 是否显示加载动画
    showLoading: {
      type: Boolean,
      value: true
    },
    // 是否使用淡入效果
    fadeIn: {
      type: Boolean,
      value: true
    },
    // 是否显示重试按钮
    showRetry: {
      type: Boolean,
      value: true
    },
    // 是否显示长按菜单
    showMenuByLongpress: {
      type: Boolean,
      value: false
    },
    // 自动重试次数
    retryCount: {
      type: Number,
      value: 1
    },
    // 重试延迟(毫秒)
    retryDelay: {
      type: Number,
      value: 1000
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    loaded: false,
    error: false,
    currentRetryCount: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 图片加载成功
    onImageLoad() {
      // 延迟一点显示实际图片，让占位图平滑过渡
      setTimeout(() => {
        this.setData({
          loaded: true
        });
        // 触发加载完成事件
        this.triggerEvent('load');
      }, 100);
    },
    
    // 图片加载失败
    onImageError(e) {
      console.error('图片加载失败:', this.data.src, e);
      
      // 尝试自动重试
      if (this.data.currentRetryCount < this.data.retryCount) {
        this.setData({
          currentRetryCount: this.data.currentRetryCount + 1
        });
        
        setTimeout(() => {
          // 通过重新设置src触发重新加载
          this.setData({
            src: this.data.src + '?retry=' + new Date().getTime()
          });
        }, this.data.retryDelay);
        
        return;
      }
      
      this.setData({
        error: true,
        loaded: false
      });
      
      // 触发错误事件
      this.triggerEvent('error', e);
    },
    
    // 手动重试加载
    retryLoad() {
      this.setData({
        error: false,
        loaded: false,
        currentRetryCount: 0,
        // 添加时间戳避免缓存
        src: this.data.src + '?reload=' + new Date().getTime()
      });
    }
  }
})`,

  // 组件JSON配置模板
  json: `{
  "component": true,
  "usingComponents": {}
}`
};

// SVG占位图模板
const DEFAULT_PLACEHOLDER_SVG = `<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#f5f5f5"/>
  <rect x="175" y="125" width="50" height="50" fill="#e0e0e0"/>
  <text x="50%" y="50%" font-family="Arial" font-size="24" text-anchor="middle" fill="#a0a0a0">加载中...</text>
</svg>`;

const ERROR_PLACEHOLDER_SVG = `<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#f5f5f5"/>
  <rect x="185" y="135" width="30" height="30" fill="#e57373"/>
  <text x="50%" y="50%" font-family="Arial" font-size="24" text-anchor="middle" fill="#d32f2f">加载失败</text>
</svg>`;

/**
 * 确保目录存在
 * @param {string} dirPath 目录路径
 */
function ensureDirectoryExists(dirPath) {
  if (fs.existsSync(dirPath)) return;
  
  const parentDir = path.dirname(dirPath);
  if (!fs.existsSync(parentDir)) {
    ensureDirectoryExists(parentDir);
  }
  
  fs.mkdirSync(dirPath);
}

/**
 * 创建延迟加载图片组件
 */
function createLazyImageComponent() {
  const componentDir = 'components/lazy_image';
  const placeholdersDir = 'images/placeholders';
  
  console.log('创建延迟加载图片组件...');
  
  // 创建组件目录
  ensureDirectoryExists(componentDir);
  
  // 创建占位图目录
  ensureDirectoryExists(placeholdersDir);
  
  // 创建默认占位图
  fs.writeFileSync(path.join(placeholdersDir, 'default_placeholder.svg'), DEFAULT_PLACEHOLDER_SVG);
  console.log('✅ 已创建默认占位图');
  
  // 创建错误占位图
  fs.writeFileSync(path.join(placeholdersDir, 'error_placeholder.svg'), ERROR_PLACEHOLDER_SVG);
  console.log('✅ 已创建错误占位图');
  
  // 创建组件文件
  fs.writeFileSync(path.join(componentDir, 'index.wxml'), COMPONENT_TEMPLATE.wxml);
  fs.writeFileSync(path.join(componentDir, 'index.wxss'), COMPONENT_TEMPLATE.wxss);
  fs.writeFileSync(path.join(componentDir, 'index.js'), COMPONENT_TEMPLATE.js);
  fs.writeFileSync(path.join(componentDir, 'index.json'), COMPONENT_TEMPLATE.json);
  
  console.log('✅ 已创建延迟加载图片组件');
  
  // 创建使用说明
  const usageGuide = `# 延迟加载图片组件使用指南

## 注册组件

在页面的JSON配置文件中注册组件:

\`\`\`json
{
  "usingComponents": {
    "lazy-image": "/components/lazy_image/index"
  }
}
\`\`\`

## 基本使用

在WXML中使用组件:

\`\`\`html
<lazy-image 
  src="/path/to/actual/image.webp"
  width="100%"
  height="400rpx"
></lazy-image>
\`\`\`

## 自定义占位图

\`\`\`html
<lazy-image 
  src="/path/to/actual/image.webp"
  placeholder-src="/images/placeholders/custom_placeholder.svg"
  error-src="/images/placeholders/custom_error.svg"
  width="100%"
  height="400rpx"
></lazy-image>
\`\`\`

## 完整参数示例

\`\`\`html
<lazy-image 
  src="/path/to/actual/image.webp"
  placeholder-src="/images/placeholders/custom_placeholder.svg"
  error-src="/images/placeholders/custom_error.svg"
  mode="aspectFill"
  width="100%"
  height="400rpx"
  custom-class="my-image"
  custom-style="border-radius: 12rpx;"
  use-lazy-load="{{true}}"
  use-webp="{{true}}"
  show-loading="{{true}}"
  fade-in="{{true}}"
  show-retry="{{true}}"
  show-menu-by-longpress="{{false}}"
  retry-count="{{2}}"
  retry-delay="{{1500}}"
  bindload="onImageLoad"
  binderror="onImageError"
></lazy-image>
\`\`\`

## 参数说明

| 属性名 | 类型 | 默认值 | 说明 |
|-------|------|-------|------|
| src | String | - | 实际图片路径 |
| placeholder-src | String | /images/placeholders/default_placeholder.svg | 占位图路径 |
| error-src | String | /images/placeholders/error_placeholder.svg | 错误占位图路径 |
| mode | String | aspectFill | 图片裁剪模式 |
| width | String | 100% | 宽度 |
| height | String | 300rpx | 高度 |
| custom-class | String | - | 自定义类名 |
| custom-style | String | - | 自定义样式 |
| use-lazy-load | Boolean | true | 是否使用微信小程序原生懒加载 |
| use-webp | Boolean | true | 是否优先使用WebP格式 |
| show-loading | Boolean | true | 是否显示加载动画 |
| fade-in | Boolean | true | 是否使用淡入效果 |
| show-retry | Boolean | true | 是否显示重试按钮 |
| show-menu-by-longpress | Boolean | false | 是否显示长按菜单 |
| retry-count | Number | 1 | 自动重试次数 |
| retry-delay | Number | 1000 | 重试延迟(毫秒) |

## 事件

| 事件名 | 说明 | 参数 |
|-------|------|------|
| bind:load | 图片加载成功 | event |
| bind:error | 图片加载失败 | event |
`;

  // 保存使用指南
  fs.writeFileSync(path.join(componentDir, 'README.md'), usageGuide);
  console.log('✅ 已创建使用指南');
  
  // 提供使用示例
  return `
延迟加载图片组件已创建完成!

组件路径: ${componentDir}
使用指南: ${componentDir}/README.md

基本使用示例:

1. 在页面JSON中:
{
  "usingComponents": {
    "lazy-image": "/components/lazy_image/index"
  }
}

2. 在页面WXML中:
<lazy-image 
  src="/path/to/actual/image.webp"
  width="100%"
  height="400rpx"
></lazy-image>

3. 完整的大图加载示例:
<lazy-image 
  src="/src/device_types/seawater_lamp/images/sps.webp"
  placeholder-src="/images/placeholders/sps_placeholder.svg"
  width="100%"
  height="500rpx"
></lazy-image>
`;
}

// 执行创建
const result = createLazyImageComponent();
console.log(result); 